<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <ul class="wb-slot-machine" @click.stop>
        <li ref="slot_0" class="slotMachine">
          <div :class="getSlotClass(item_)" :style="getSlotStyle(item_)" v-for="(item_, index) in randomArr_0" :key="'slot_0_' + index"></div>
        </li>
        <li ref="slot_1" class="slotMachine">
          <div :class="getSlotClass(item_)" :style="getSlotStyle(item_)" v-for="(item_, index) in randomArr_1" :key="'slot_1_' + index"></div>
        </li>
        <li ref="slot_2" class="slotMachine">
          <div :class="getSlotClass(item_)" :style="getSlotStyle(item_)" v-for="(item_, index) in randomArr_2" :key="'slot_2_' + index"></div>
        </li>
      </ul>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils';
import { EventBus } from '@/store/index'
import { reactive } from 'vue'
import { isHasOwnProperty } from '@/plugins/utils'

export default {
  name: 'WbSlotMachine',
  mixins: [utils],
  setup () {
    const state = reactive({
      randomArr_0: [],
      randomArr_1: [],
      randomArr_2: [],
    })
    const state_ = {
      randomObj_0: {},
      randomObj_1: {},
      randomObj_2: {},
      isRunOnce: false,
      runningNum: 0,
      slot_0: null,
      slot_1: null,
      slot_2: null,
    }
    _.merge(state, state_)
    return state
  },
  components: {
    InjectTemplate
  },
  created() {
    this.initRandomArr();
    if(this.isH5Edit){
      return 
    }
    EventBus.$off("slotMachine", this.onSlotMachine);
    EventBus.$on("slotMachine", this.onSlotMachine);

    EventBus.$off("stopSlotMachine", this.onStopSlotMachine);
    EventBus.$on("stopSlotMachine", this.onStopSlotMachine);
  },
  mounted() {
    if(!this.isH5Edit){
      this.slot_0 = this.$refs.slot_0;
      this.slot_1 = this.$refs.slot_1;
      this.slot_2 = this.$refs.slot_2;

      const spinsTime = parseFloat(this.commonAttr.spinsTime) * 1000;
      this.machine_0 = new window.SlotMachine(this.slot_0, {
        active: 0,
        delay: spinsTime,
      });
      this.machine_1 = new window.SlotMachine(this.slot_1, {
        active: 0,
        delay: spinsTime,
      });
      this.machine_2 = new window.SlotMachine(this.slot_2, {
        active: 0,
        delay: spinsTime,
      });
    }
  },
  methods: {
    initRandomArr(){
      _.forEach(this.lists, (item, index) => {
        item.index = index;
      })
      let newArr = _.cloneDeep(_.shuffle(this.lists));
      this.dealRandomArr(newArr, 0);
      newArr = _.cloneDeep(newArr);
      let item = newArr.shift();
      newArr.push(item);
      this.dealRandomArr(newArr, 1);
      newArr = _.cloneDeep(newArr);
      item = newArr.shift();
      newArr.push(item);
      this.dealRandomArr(newArr, 2);
    },
    dealRandomArr(newArr, index_){
      let randomArr = this['randomArr_' + index_] = newArr;
      _.forEach(randomArr, (item, index) => {
        item.randomIndex = index;
        this['randomObj_' + index_][item.index] = item;
      })
    },
    getSlotStyle(item_){
      let style = {
        backgroundImage: 'url(' + item_.url + ')'
      };
      return style;
    },
    getSlotClass(){
      //item_
      return ['slot'];
    },
    onSlotMachine(){
      if(this.isRunOnce){
        this.machine_0.nextActive = 0;
        this.machine_1.nextActive = 0;
        this.machine_2.nextActive = 0;
      }else{
        this.isRunOnce = true
      }
      let spins = 99999;//this.commonAttr.spins;
      this.machine_0.shuffle(spins);
      this.machine_1.shuffle(spins);
      this.machine_2.shuffle(spins);

      let animateTime = parseFloat(this.commonAttr.animateTime)
      window.setTimeout(() => {
        EventBus.$emit("itemClick", {id: this.item.id, index: 0, e: null});
      }, animateTime * 1000);
    },
    onStopSlotMachine({ lotteryIndex }){
      // let xx = {
      //   0:,//蓝忘机
      //   1:,//真果粒粉色
      //   2:,//蓝忘机
      //   3:,//真果粒蓝色
      //   4:,//真果粒all
      // }
      // lotteryIndex = 0 //测试代码
      const interactionData = this.item.interactionData;
      if(lotteryIndex >= 0){
        if(interactionData && interactionData.dimensionLists){
          const list = interactionData.dimensionLists[lotteryIndex];
          const randomIndex = _.random(0, list.length-1);
          if(list[randomIndex].params){
            let imgIndexObj = JSON.parse(list[randomIndex].params)
            if(isHasOwnProperty(imgIndexObj, 'imgIndex')){
              let imgIndex_0 = this.randomObj_0[imgIndexObj.imgIndex].randomIndex;
              let imgIndex_1 = this.randomObj_1[imgIndexObj.imgIndex].randomIndex;
              let imgIndex_2 = this.randomObj_2[imgIndexObj.imgIndex].randomIndex;

              this.machine_0.nextActive = imgIndex_0;
              this.machine_1.nextActive = imgIndex_1;
              this.machine_2.nextActive = imgIndex_2;
            }
          }
        }
      }else{
        const len = this.item.lists.length - 1;
        let randomIndex = _.random(0, len);
        this.machine_0.nextActive = randomIndex;
        randomIndex++;
        randomIndex = randomIndex % len;
        this.machine_1.nextActive = randomIndex;
        randomIndex++;
        randomIndex = randomIndex % len;
        this.machine_2.nextActive = randomIndex;
      }
      this.runningNum = 0;
      this.machine_0.stop(this.stopCb);
      this.machine_1.stop(this.stopCb);
      this.machine_2.stop(this.stopCb);
    },
    stopCb(){
      this.runningNum++;
      if(this.runningNum >= 3){
        window.setTimeout(() => {
          EventBus.$emit("delayShowPostPop");
        }, this.commonAttr.pauseTime * 1000)
      }
    }
  },
  beforeUnmount(){
    if(!this.isH5Edit){
      EventBus.$off("stopSlotMachine", this.onStopSlotMachine);
      EventBus.$off("slotMachine", this.onSlotMachine);
      this.machine_0.destroy();
      this.machine_1.destroy();
      this.machine_2.destroy();
    }
  }
};
</script>
<style lang="scss">
.wb-slot-machine {
  width: inherit;
  height: inherit;

  .slotMachine{
    width: 33.3333%;
    height: inherit;
    overflow: hidden;
    font-size: 0;
    float: left;

    .slotMachineContainer{
      width: 100%;
      height: inherit;
    }
    .slot{
      width: 100%;
      height: inherit;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }

  .slotMachineNoTransition {
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }

  .slotMachineBlurFast {
    // -webkit-filter: blur(1px);
    // filter: blur(1px);
  }

  .slotMachineBlurMedium {
    // -webkit-filter: blur(3px);
    // filter: blur(3px);
  }

  .slotMachineBlurSlow {
    // -webkit-filter: blur(2px);
    // filter: blur(2px);
  }

  .slotMachineBlurTurtle {
    // -webkit-filter: blur(1px);
    // filter: blur(1px);
  }
  .slotMachineGradient {
  }
  //slotMachineGradient main.css
}
</style>